<template>
  <div class="home">
    <HelloWorld :msg="title"/>
    <div class="content_wrap">
    <a-button type="primary" @click="showModal">
      Open Modal with async logic
    </a-button>
    <a-modal
      title="Title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p>{{ ModalText }}</p>
    </a-modal>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
  title = 'About Page';
  ModalText = 'Content of the modal';
  visible = false;
  confirmLoading = false;

  showModal() {
    this.visible = true;
  }
  handleOk() {
    this.ModalText = 'The modal will be closed after two seconds';
    this.confirmLoading = true;
    this.visible = false;
    this.$message.success('ok');
  }
  handleCancel() {
    console.log('Clicked cancel button');
    this.visible = false;
  }


}
</script>

<style scoped lang="less">

</style>